<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d')
      ctx.save()
      ctx.clearRect(0, 0, 150, 150)
      ctx.translate(75, 75)
      ctx.lineCap = 'round'
      // 刻度
      ctx.save()
      var startLinePos = 52
      for (var i=0; i<60; i++) {
        ctx.beginPath()
        ctx.lineWidth = i % 5 === 0 ? 3 : 2
        var lineLen = i % 5 === 0 ? 5 : 2
        ctx.moveTo(startLinePos - lineLen, 0)
        ctx.lineTo(startLinePos, 0)
        ctx.rotate(Math.PI / 30)
        ctx.stroke()
      }
      var time = new Date()
      var s = time.getSeconds()
      var m = time.getMinutes()
      var h = time.getHours()
      h = h >= 12 ? h - 12 : h
      ctx.restore()
      // 时针
      drawClockwise(ctx, {
        lineAt: -35,
        lineWidth: 5,
        h,
        m,
        s
      })
      // 分针
      drawClockwise(ctx, {
        lineAt: -45,
        lineWidth: 3,
        m,
        s
      })
      // 秒针
      drawClockwise(ctx, {
        strokeStyle: '#D40000',
        lineAt: -45,
        s
      })
      // 外框
      ctx.beginPath()
      ctx.lineWidth = 6
      ctx.strokeStyle = '#325FA2'
      ctx.arc(0, 0, 60, 0, 2 * Math.PI, true)
      ctx.stroke()
      ctx.restore()
      window.requestAnimationFrame(draw)
    }

    function drawClockwise(ctx, options) {
      ctx.save()
      ctx.strokeStyle = options.strokeStyle || '#000'
      const {h, m, s} = options
      var radius = 0
      if (h || h === 0) {
        radius = h * (Math.PI / 6) + m * (Math.PI / 360) + s * (Math.PI / 21600)
      } else if (m || m === 0) {
        radius = m * (Math.PI / 30) + s * (Math.PI / 1800)
      } else {
        radius = s * (Math.PI / 30)
      }
      ctx.rotate(radius)
      ctx.beginPath()
      ctx.lineWidth = options.lineWidth || 2
      ctx.moveTo(0, 0)
      ctx.lineTo(0, options.lineAt)
      ctx.stroke()
      ctx.restore()
    }
  </script>
</head>
<body onload="draw()">
  <canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>